import { computed } from "./computed.js"
import { effect } from "./effect.js"
import { reactive } from "./reactive.js"
import { ref } from './ref.js'
import { watch } from "./watch.js"
import { watchEffect } from "./watchEffect.js"

// const obj = {
//   a: 1,
//   b: 2
// }
const arr = [1, 2, 3, 4]

// const state = reactive(obj)
const state2 = reactive(arr)
function fn() {
  state2[0]
}
effect(fn)

state2[0] = 2

// function fn() {
//   state.a++
// }
// const effectFn = effect(fn, {
//   lazy: true
// })

// effectFn()

// state.a++


// ref test
// const state = ref(0)
// effect(() => {
//   console.log('state', state.value)
// })
// state.value++

// computed test
// const state = reactive({
//   a: 1, b: 2
// })
// const sum = computed(() => {
//   console.log('computed')
//   return state.a + state.b
// })
// effect(() => {
//   console.log('render', sum.value)
// })
// state.a++
// state.a++
// state.a++

// watch test
// const state = reactive({ a: 1, b: 2 })
// watch(() => state.a, (newValue, oldValue) => {
//   console.log(`Count changed from ${oldValue} to ${newValue}`)
// })
// state.a = 2

// watchEffect test
// const state = reactive({ a: 1, b: 2 })
// watchEffect(() => {
//   console.log('watchEffect', state.a, state.b)
// })
// state.a++
// state.a++